// pages/canvas/canvas.js
var Base64 = require('../../utils/base64.js')
var upng = require('../../utils/UPNG.js')
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    img1: '',
    img2: '',
    img3: '',

    show_img1: '',
    show_img2: '',
    show_img3: '',

    show_girl: '',
    show_man: '',
    show_phone: '',
    sex_img: '',
    sex: '2',
  },
  // click_sure: function () {  
  canvasLoad: function() {
    let that = this;
    console.log("ok");
    //画图
    const ctx = wx.createCanvasContext('shape');
    let name = '杨洋',
      age = '20岁',
      phone = '15639785623';

    wx.getSystemInfo({
      success: function(e) {
        const rpx = e.windowWidth / 375;
        console.log(rpx)
        ctx.rect(0, 0, 562, 1076)
        ctx.setFillStyle('white')
        ctx.fill();

        //图片
        ctx.drawImage(that.data.show_img1, 0, 0, 281 * rpx, 281 * rpx)
        ctx.drawImage(that.data.show_img2, 0, 293 * rpx, 136 * rpx, 136 * rpx)
        ctx.drawImage(that.data.show_img3, 145 * rpx, 293 * rpx, 136 * rpx, 136 * rpx)
        //文字
        ctx.font = '18rpx bold 微软雅黑';
        ctx.setFillStyle("#333");
        ctx.setTextAlign('center');
        ctx.fillText(name, 281 * rpx / 2, 461 * rpx);
        ctx.font = '14rpx 微软雅黑';
        ctx.setFillStyle("#999");
        ctx.fillText(age, 120 * rpx, 488 * rpx);
        //iocn
        if (that.data.sex == "1") {
          ctx.drawImage(that.data.show_girl, 145 * rpx, 475 * rpx, 13 * rpx, 15 * rpx);
        } else if (that.data.sex == "2") {
          ctx.drawImage(that.data.show_man, 145 * rpx, 475 * rpx, 13 * rpx, 15 * rpx);
        } else {}
        ctx.drawImage(that.data.show_phone, 75 * rpx, 505 * rpx, 13 * rpx, 15 * rpx);
        ctx.setFillStyle("#333");
        ctx.font = '16rpx bold 微软雅黑';
        ctx.fillText(phone, 150 * rpx, 518 * rpx);
        ctx.draw(true, function(e) {
          console.log(e)
          // wx.canvasToTempFilePath({
          //      x: 0,
          //      y: 0,
          //      width: 562,
          //      height: 1076,
          //      destWidth: 562,
          //      destHeight: 1072,
          //      canvasId: 'shape',
          //      success: function (res) {
          //           console.log(res.tempFilePath)
          //           wx.previewImage({
          //                current:"1",
          //                urls: [res.tempFilePath]
          //           })
          //      }
          // })
          //daochu
          wx.canvasGetImageData({
            canvasId: 'shape',
            x: 0,
            y: 0,
            width: 562,
            height: 1076,
            success(res) {
              // 3. png编码
              let pngData = upng.encode([res.data.buffer], res.width, res.height)
              // 4. base64编码
              let base64 = wx.arrayBufferToBase64(pngData)
              // console.log(base64)
              // wx.request({
              //   url: app.globalData.url + 'api/resume/uploading',
              //   method: "POST",
              //   header: {
              //     "content-type": "application/x-www-form-urlencoded"
              //   },
              //   data: {
              //     token: app.globalData.token,
              //     place: 1,
              //     image: base64 + '',
              //   },
              //   success: function(e) {
              //     console.log(e)
              //   }
              // })
            }
          })
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.showLoading({
      title: '加载中~',
    });
    if (this.data.sex == "1") {
      this.setData({
        sex_img: this.data.show_man,
      })
    } else if (this.data.sex == "2") {
      this.setData({
        sex_img: this.data.show_girl,
      })
    }
    let that = this;

    //
    wx.request({
      url: app.globalData.url + 'api/resume/index',
      method:'POST',
      data:{
        token:app.globalData.token,
      },
      success:function(e){
        console.log(e)
      }
    })
    //取出照片
    wx.request({
      url: app.globalData.url + 'api/resume/read/photo',
      method: "POST",
      data: {
        token: app.globalData.token,
      },
      success: function(e) {
        console.log(e)
        var str1 = e.data.data.resume["0"].img_url,
          str2 = e.data.data.resume["1"].img_url,
          str3 = e.data.data.resume["2"].img_url;
        var reg = /http/g;

        var img1 = str1.replace(reg, 'https'),
          img2 = str2.replace(reg, 'https'),
          img3 = str3.replace(reg, 'https');
        that.setData({
          img1: img1,
          img2: img2,
          img3: img3,
        })
        wx.downloadFile({
          url: img1,
          success: function(e) {
            // console.log(e.tempFilePath)
            that.setData({
              show_img1: e.tempFilePath,
            })
          }
        })
        wx.downloadFile({
          url: img2,
          success: function(e) {
            // console.log(e.tempFilePath)
            that.setData({
              show_img2: e.tempFilePath,
            })
          }
        })
        wx.downloadFile({
          url: img3,
          success: function(e) {
            // console.log(e.tempFilePath)
            that.setData({
              show_img3: e.tempFilePath,
            })
          }
        })
        wx.downloadFile({
          url: 'https://www.zhibohome.net/images/resume/ic_man1.png',
          success: function(e) {
            // console.log(e.tempFilePath)
            that.setData({
              show_girl: e.tempFilePath,
            })
          }
        })
        wx.downloadFile({
          url: 'https://www.zhibohome.net/images/resume/ic_girl1.png',
          success: function(e) {
            // console.log(e.tempFilePath)
            that.setData({
              show_man: e.tempFilePath,
            })
          }
        })
        wx.downloadFile({
          url: 'https://www.zhibohome.net/images/resume/card_phone.png',
          success: function(e) {
            // console.log(e.tempFilePath)
            that.setData({
              show_phone: e.tempFilePath,
            })
          }
        })
      }
    })
    var timer= setInterval(function(){
      if (that.data.show_img1 && that.data.show_img1 && that.data.show_img1 && that.data.show_girl && that.data.show_man && that.data.show_phone) {
        console.log("加载完成");
        wx.hideLoading();
        console.log(that.data.show_img1)
        clearInterval(timer);
        //执行
        that.click_sure()



      } else {
        console.log("加载未完成");
        
      }
    },1000)
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})